<template>
  <div class="level-select">
    <h1>选择关卡</h1>
    <div class="levels">
      <div 
        v-for="level in levels" 
        :key="level.id"
        class="level-card"
        @click="$emit('start-game', level)"
      >
        <div class="level-preview" :style="{ backgroundImage: `url(${level.preview})` }"></div>
        <h3>{{ level.name }}</h3>
        <p>{{ level.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
import streetPreview from '@/assets/textures/street_preview.png'
import dojoPreview from '@/assets/textures/dojo_preview.png'
import volcanoPreview from '@/assets/textures/volcano_preview.png'

export default {
  emits: ['start-game'],
  setup() {
    const levels = ref([
      {
        id: 1,
        name: '城市街道',
        description: '霓虹灯下的街头战斗',
        preview: streetPreview,
        scene: 'streetScene',
        bgMusic: 'street_music.mp3'
      },
      {
        id: 2,
        name: '武道馆',
        description: '传统日式武道场',
        preview: dojoPreview,
        scene: 'dojoScene',
        bgMusic: 'dojo_music.mp3'
      },
      {
        id: 3,
        name: '火山口',
        description: '熔岩环绕的极限战斗',
        preview: volcanoPreview,
        scene: 'volcanoScene',
        bgMusic: 'volcano_music.mp3'
      }
    ])

    return { levels }
  }
}
</script>

<style lang="scss" scoped>
.level-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  height: 100vh;
  background: radial-gradient(circle, #222, #000);

  h1 {
    margin-bottom: 2rem;
    font-size: 2.5rem;
    color: #ff5555;
    text-shadow: 0 0 10px #ff0000;
  }

  .levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 80%;
  }

  .level-card {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

    &:hover {
      transform: scale(1.05);
      border-color: #ff5555;
      box-shadow: 0 0 20px rgba(255, 85, 85, 0.5);
    }

    .level-preview {
      width: 100%;
      height: 150px;
      background-size: cover;
      background-position: center;
      margin-bottom: 1rem;
      border-radius: 4px;
    }

    h3 {
      color: #ffcc00;
      margin-bottom: 0.5rem;
    }

    p {
      color: #aaa;
      font-size: 0.8rem;
    }
  }
}
</style>